<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HOME</title>
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/swiper-bundle.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/commond.css">
    <link rel="stylesheet" href="css/HOME.css">
</head>


<body>

    <label href="" id="ttoopp" style="opacity: 0;position: absolute;"></label>
    <header>
        <nav class="navbar menu">
            <div class="container  box1">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar span"></span>
                      <span class="icon-bar span"></span>
                      <span class="icon-bar span"></span>
                    </button>
                    <a class="navbar-brand logo" href="index.html">Dog Home</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


                    <ul class="nav navbar-nav navbar-right ull">
                        <li class="active"><a href="#">HOME</a></li>
                        <li><a href="html/about.html">About us</a></li>
                        <li><a href="html/gallery.html">Gallery</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown<span class="caret"></span></a>
                            <ul class="dropdown-menu ddd">
                                <li class="llii"><a href="html/blog.html">Blog </a></li>
                                <li class="llii"><a href="#">What We do</a></li>
                                <li class="llii"><a href="#">Testimonials</a></li>
                            </ul>
                        </li>
                        <li><a href="html/contant_us.html">Content us</a></li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
    </header>

    <div class="home-first-box">
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="content banner">
                        <div class="container-fluid title">
                            <!--动画-->
                            <h1>How to Train Your Dog</h1>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit
                                <br/> acntium doemque laudantium, totam rem aperiam eaque ipsa
                                <br/>quae ab illo.
                            </p>
                            <a href="#"><span>Read More</span></a>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="content content2">
                        <div class="container-fluid title">
                            <h1>How to Train Your Cat</h1>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit
                                <br/> acntium doemque laudantium, totam rem aperiam eaque ipsa
                                <br/>quae ab illo.
                            </p>
                            <a href="#"><span>Read More</span></a>

                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="content content3">
                        <div class="container-fluid title">
                            <h1>How to Train Your Bird</h1>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit
                                <br/> acntium doemque laudantium, totam rem aperiam eaque ipsa
                                <br/>quae ab illo.
                            </p>
                            <a href="#"><span>Read More</span></a>

                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-button-prev  left"></div>
            <!--左箭头-->
            <div class="swiper-button-next  right"></div>
            <!--右箭头。-->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div class="home-second-box">
        <div class="container">
            <div class="what">
                <h3 class=" ">Welcome to Our Website</h3>
                <p class=" " style="animation-delay: .2s;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </p>
                <img src="images/about2.jpg" class="img-fluid" style="animation-delay:.3s ;" alt="">
            </div>
        </div>
    </div>

    <div class="home-three-box">
        <div class="container">
            <div class="what">
                <h3>What we do</h3>
                <div class="row three-box">
                    <div class=" col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        <div class="dog-introduce ">
                            <img src="images/wh1.jpg" class="img-fluid" alt="">
                            <h3>House & Crate</h3>
                            <p>Sit amet mattis quam, sit amet excepteur sint occaecat cupidatat.</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        <div class="dog-introduce " style="animation-delay: 0s;">
                            <img src="images/wh2.jpg" class="img-fluid" alt="">
                            <h3>Leash Training</h3>
                            <p>Sit amet mattis quam, sit amet excepteur sint occaecat cupidatat.</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        <div class="dog-introduce  " style="animation-delay: .1s;">
                            <img src=" images/wh3.jpg " class="img-fluid " alt=" ">
                            <h3>Clicker Training</h3>
                            <p>Sit amet mattis quam, sit amet excepteur sint occaecat cupidatat.</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
                        <div class="dog-introduce   " style="animation-delay: .1s; ">
                            <img src="images/wh4.jpg " class="img-fluid " alt=" ">
                            <h3>Basic Commands</h3>
                            <p>Sit amet mattis quam, sit amet excepteur sint occaecat cupidatat.</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
                        <div class="dog-introduce " style="animation-delay: .2s; ">
                            <img src="images/wh3.jpg " class="img-fluid " alt=" ">
                            <h3>Leash Training</h3>
                            <p>Sit amet mattis quam, sit amet excepteur sint occaecat cupidatat.</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
                        <div class="dog-introduce" style="animation-delay: .2s; ">
                            <img src="images/wh4.jpg " class="img-fluid " alt=" ">
                            <h3>Basic Commands</h3>
                            <p>Sit amet mattis quam, sit amet excepteur sint occaecat cupidatat.</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
                        <div class="dog-introduce   " style="animation-delay: .3s; ">
                            <img src="images/wh1.jpg " class="img-fluid " alt=" ">
                            <h3>House & Crate</h3>
                            <p>Sit amet mattis quam, sit amet excepteur sint occaecat cupidatat.</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
                        <div class="dog-introduce  " style="animation-delay: .3s; ">
                            <img src="images/wh2.jpg " class="img-fluid " alt=" ">
                            <h3>Leash Training</h3>
                            <p>Sit amet mattis quam, sit amet excepteur sint occaecat cupidatat.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="home-four-box ">
        <div class="container ">
            <div class="four-box ">
                <h3>Our Statistics</h3>
                <div class="row four-box2 ">
                    <div class="col-md-3 col-sm-6 col-xs-12 four-box3 ">
                        <h2 class="">8</h2>
                        <p class="">Years of Experience</p>
                    </div>
                    <div class="col-md-3 col-sm-6 col-xs-12 four-box3 ">
                        <h2 class="">600</h2>
                        <p class="">Years of Experience</p>
                    </div>
                    <div class="col-md-3 col-sm-6 col-xs-12 four-box3 ">
                        <h2 class="">300</h2>
                        <p class="">Years of Experience</p>
                    </div>
                    <div class="col-md-3 col-sm-6 col-xs-12 four-box3 ">
                        <h2 class="">30</h2>
                        <p class="">Years of Experience</p>
                    </div>

                </div>
            </div>
        </div>
    </div>


    <!--动画-->

    <div class="home-five-box ">
        <div class="container ">
            <div class="row five-box ">
                <div class="col-lg-4 col-md-4 five-box2  " style="animation-delay: .3s;">
                    <h3>Pet Services</h3>
                    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id.</p>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabofdfd dsdsd. </p>
                </div>
                <div class="col-lg-8 col-md-8" style="animation-delay:.3s ;">
                    <div class="row ">
                        <div class="col-md-6 col-sm-6 five-box3 ">
                            <div class="five-box4 ">
                                <span class="glyphicon glyphicon-resize-full "></span>
                                <h4>Grooming</h4>
                                <p>Integer sit amet mattis quam, sit amet ultricies velit.</p>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-6 five-box3 ">
                            <div class="five-box4 ">
                                <span class="glyphicon glyphicon-piggy-bank "></span>
                                <h4>Grooming</h4>
                                <p>Integer sit amet mattis quam, sit amet ultricies velit.</p>
                            </div>
                        </div>
                        <div class=" col-md-6 col-sm-6 five-box3 ">
                            <div class="five-box4 ">
                                <span class="glyphicon glyphicon-heart "></span>
                                <h4>Grooming</h4>
                                <p>Integer sit amet mattis quam, sit amet ultricies velit.</p>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-6 five-box3 ">
                            <div class="five-box4 ">
                                <span class="glyphicon glyphicon-bed "></span>
                                <h4>Grooming</h4>
                                <p>Integer sit amet mattis quam, sit amet ultricies velit.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="home-six-box ">
        <div class="container ">
            <div class="six-box ">
                <h3>Testimonials</h3>
                <div class="row ">
                    <div class="col-md-4 col-sm-4 six-box2">
                        <p>"Sed ut perspiciatis unde omnis iste natus error sit volup tatem accus antium dolore tium.</p>
                        <img src="images/te1.jpg" class="img-fluid" alt="">
                        <h3> - Lorem Ipsum</h3>
                    </div>
                    <div class="col-md-4 col-sm-4 six-box2" style="animation-delay: .5s;">
                        <p>"Sed ut perspiciatis unde omnis iste natus error sit volup tatem accus antium dolore tium.</p>
                        <img src="images/te2.jpg" class="img-fluid" alt="">
                        <h3> - Lorem Ipsum</h3>
                    </div>
                    <div class="col-md-4 col-sm-4 six-box2 ">
                        <p>"Sed ut perspiciatis unde omnis iste natus error sit volup tatem accus antium dolore tium.</p>
                        <img src="images/te3.jpg" class="img-fluid" alt="">
                        <h3> - Lorem Ipsum</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="home-seven-box">
        <div class="container">
            <div class="seven-box">
                <h3>Our Blog</h3>
                <div class="row">
                    <div class="col-lg-4 col-md-4 col-sm-6 seven-box2 " style="animation-delay: .5s;">
                        <img src="images/b1.jpg" alt="">
                        <div class="seven-box3">
                            <a href="#">At vero eos</a>
                            <p>Cras ultricies ligula sed magna dictum porta auris blandita.</p>
                            <a href="#">Read More</a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 seven-box2">
                        <img src="images/b2.jpg" alt="">
                        <div class="seven-box3">
                            <a href="#">At vero eos</a>
                            <p>Cras ultricies ligula sed magna dictum porta auris blandita.</p>
                            <a href="#">Read More</a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 seven-box2 ">
                        <div class="seven-box4">
                            <a href="#">Sed do eiusmod tempor auris incididunt ut.</a>
                            <p>Feb 10 2022</p>
                            <a href="#">Sed do eiusmod tempor auris incididunt ut.</a>
                            <p>July 14 2022</p>
                            <a href="#">Sed do eiusmod tempor auris incididunt ut.</a>
                            <p>Feb 06 2022</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-5 col-sm-5">
                    <div class="row">
                        <div class="col-lg-6 col-md-12 col-sm-12 foot-box">
                            <h2>About Us</h2>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit.Error sit antium dolorts remq hymue laud.</p>
                        </div>
                        <div class="col-lg-6 col-md-12 col-sm-12 foot-box">
                            <h2>Who We Are</h2>
                            <p>Error sit antium dolorts remq hymue laud.Sed ut perspiciatis unde omnis iste natus error sit.</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 col-sm-3 foot-box phone">
                    <h2>Contact Us</h2>
                    <h4>Phone</h4>
                    <p>+121 098 8907 9987</p>
                    <h4>Email </h4>
                    <p><a href="#">info@example.com</a></p>
                    <h4>Location</h4>
                    <p>Honey Avenue, New York City</p>
                </div>

                <div class="col-md-4  col-sm-4 foot-box">
                    <h2>Newsletter</h2>
                    <p>Be the first to get latest news and offers!
                        <br> Sed ut perspiciatis unde omnis.</p>
                    <form class="form">
                        <input type="email" placeholder="Enter your email...">
                        <button type="submit" class="btnn">Submit</button>
                    </form>
                    <h2>Connect With Social</h2>
                    <a href=""> <span class="glyphicon glyphicon-earphone"></span></a>
                    <a href=""> <span class="glyphicon glyphicon-camera"></span></a>

                    <a href=""> <span class="glyphicon glyphicon-briefcase"></span></a>

                    <a href=""> <span class="glyphicon glyphicon-tree-deciduous"></span></a>

                </div>
            </div>
        </div>
    </footer>
    <div class="company">
        <p> © 2022 Dog Home. All rights reserved | Design by HUAHang</p>
    </div>

    <a href="#ttoopp" id="top-btn" class="glyphicon glyphicon-arrow-up" title="返回顶部"></a>
</body>

</html>

<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/swiper-bundle.js"></script>
<script src="js/wow.min.repeat.js"></script>
<script>
    var mySwiper = new Swiper('.swiper', {

        pagination: {
            el: '.swiper-pagination',
            clickable: true,

        },

        autoplay: {
            delay: 2500,
            stopOnLastSlide: false,
            disableOnInteraction: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

    })
</script>
<script>
    new WOW().init();
</script>

<!-- <script>
    let form=document.querySelector(".form")
    form.
</script> -->